<template>
  <div class="project-detail-container">
    <div class="project-detail-left" :style="{width: leftWidth + 'px'}">
      <project-menu :project="project"></project-menu>
    </div>
    <div class="project-slicer" @mousedown="slicerMousedown" :style="{cursor: slicerCursor}"></div>
    <div class="project-detail-right" :style="{width: 'calc(100% - (2px + ' + leftWidth + 'px))'}">
      <project-api :project="project"></project-api>
    </div>
  </div>
</template>

<script>
import ProjectMenu from '@/component/ProjectMenu'
import ProjectApi from '@/component/ProjectApi'

export default {
  name: 'ProjectDetail',
  components: { ProjectApi, ProjectMenu },
  data () {
    return {
      project: {},
      leftWidth: 300,
      slicerCursor: 'col-resize'
    }
  },
  created () {
    this.$db.project.get(parseInt(this.$route.query.projectId)).then((res) => {
      this.project = res
    })
  },
  methods: {
    // 处理slicer拖动
    slicerMousedown () {
      document.onmousemove = (e) => {
        this.slicerCursor = 'default'
        const clickX = e.clientX - 80
        if (clickX <= 180) {
          this.leftWidth = 180
        } else if (clickX >= 500) {
          this.leftWidth = 500
        } else {
          this.leftWidth = clickX
        }
      }
      document.onmouseup = () => {
        this.slicerCursor = 'col-resize'
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
}
</script>

<style scoped lang="less">
@slicerWidth: 2px;
.project-detail-container {
  width: 100%;
  height: 100%;
  display: flex;

  div {
    height: 100%;
  }
}

.project-detail-left {
}

.project-slicer {
  width: @slicerWidth;
  background-color: #e0e0e0;
  transition: 0.2s;
}

.project-slicer:hover {
  background-color: #b6b6b6;
}

.project-detail-right {
}
</style>
